<template>
  <el-dialog   @open="openDialog" :title="'审核'" :visible="dialogFormVisible" @close="closeDialog">

    <el-descriptions v-if="!isAdd" title="单据信息" :column="3" border>
      <el-descriptions-item label="姓名"> {{ record.get_user.name }}</el-descriptions-item>
      <el-descriptions-item label="电话">{{ record.get_user.phone }}</el-descriptions-item>
      <el-descriptions-item label="护照号">{{ record.get_user.passport }}</el-descriptions-item>
      <el-descriptions-item label="航班号">{{ record.fly_number}}</el-descriptions-item>
      <el-descriptions-item label="订票日期">{{record.booking_date}}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag type="warning" size="small">{{record.status_name}}</el-tag>
      </el-descriptions-item>
    </el-descriptions>

    <div style="display: flex;justify-content: center">
      <el-image style="width:300px;height: 400px;margin: 0 auto"
        :src="url"
        :preview-src-list="srcList">
      </el-image>
    </div>

    <div v-if="!isAdd && this.record.detail===0">
      <el-input style="margin-top: 10px"  v-model="form.need_point" placeholder="加分">
        <template #prepend>加分：</template>
        <template #append >
          <el-button type="primary" @click="onSubmit"  >确定</el-button>
        </template>

      </el-input>
    </div>


  </el-dialog>
</template>

<script>

import { myGet, myPost } from '@/utils/myUtils'

const urlCheck = '/guard/flyOrder/check'

export default {
  name: 'CheckFlyOrderDialog',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    record: {
      type: Object,
      default: {}
    }
  },

  data() {
    return {
      loading:false,
      form: {
        id: 0,
        need_point: 0
      },
      host: process.env.VUE_APP_HOST,
      url: '',
      srcList: []
    }
  },
  computed: {
    isAdd: function () {
      return Object.keys(this.record).length <= 0;
    }
  },
  methods: {
    onSubmit() {
      if(this.form.need_point<=0){
        this.$message.warning('请添加积分！');
        return
      }

      this.loading = true
      myGet(urlCheck, this.form).then(res => {
        if (res) {
          this.$message.success(res.msg)
          this.$emit('success', false)
        }
      }).finally(()=>{
        this.loading = false
      })
    },
    cancel() {
      this.$emit('cancelDialog', false)
      Object.assign(this.$data.form, this.$options.data().form)
    },
    closeDialog() {
      this.cancel()
    },
    openDialog(){
      console.log(this.record)
      this.form.id = this.record.id
      this.url = this.host+this.record.img_path
      this.srcList.push(this.host+this.record.img_path)
    },
  },


}
</script>

<style>

.el-input-group__append:hover{
  color: #409EFF;
}

</style>
